<template>
  <div class="bg">
    <div class="input">
      <el-input v-model.trim="password" type="password"
                placeholder="Please input password"
                @keyup.enter="submit"
                maxlength="32"
                show-password>
      </el-input>
    </div>
  </div>
</template>

<script>
import {ref, toRaw} from 'vue'
import {useStore} from "vuex";
import router from "@/router";
import {ElMessage} from "element-plus";
import sha256 from "crypto-js/sha256";

export default {
  name: `Lock`,
  setup(){
    const password=ref('');
    const store=useStore();
    const submit=()=>{
      if(sha256(password.value).toString()===store.state.password){
        store.commit('unlockInit',password.value)
        store.commit('addHistory','打开了该软件');
        router.push('/home')
      }else{
        ElMessage({
          showClose:true,
          message:'密码错误',
          type:'error',
          duration:1500
        })
      }
    };
    return{
      password,
      submit
    }
  }
}
</script>

<style scoped>
.bg{
  background-color: rgb(0,0,0,0.4);
  height: 100%;
}
.input{
  position: relative;
  top: 45%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 300px;
}
:deep(.el-input__inner) {
  --el-input-inner-height: 48px !important;
  letter-spacing: 1px;
  font-size: 20px;
  height: var(--el-input-inner-height);
  line-height: var(--el-input-inner-height);
}
</style>
